<template>
  <div class="chat-setting" @click="visible = true">
    <i class="icon-infrastructure"></i>
  </div>
  <d-modal v-model:visible="visible" width="520" :escapable="true">
    <template #header>
      <div class="modal-title">学习助手设置</div>
    </template>
    <template #body>
      <div class="setting-item">
        <span>教育模式</span>
        <d-switch v-model="statusStore.educationMode" size="sm"></d-switch>
      </div>
      <div class="setting-item">
        <span>学习路径个性化</span>
        <d-switch v-model="statusStore.personalizedPath" size="sm"></d-switch>
      </div>
      <div class="setting-item">
        <span>解释详尽度</span>
        <d-radio-group v-model="statusStore.explainLevel">
          <d-radio :value="1">简要</d-radio>
          <d-radio :value="2">标准</d-radio>
          <d-radio :value="3">详尽</d-radio>
        </d-radio-group>
      </div>
      <div class="setting-item">
        <span>教学效果指标采集</span>
        <d-switch v-model="statusStore.collectMetrics" size="sm"></d-switch>
      </div>
    </template>
    <template #footer>
      <d-button variant="solid" color="primary" @click="visible = false">完成</d-button>
    </template>
  </d-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useChatStatusStore } from '@/store';
const visible = ref(false);
const statusStore = useChatStatusStore();
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.chat-setting {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  border-radius: $devui-border-radius-full;
  background-color: $devui-base-bg;
  box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
  cursor: pointer;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
</style>
